<template>
    <div class="login-box">

        <div style="height: 40px;">
        </div>

        <el-form label-position="top">
            <div class="form-head">
                <div class="form-head-title">进销存
                    <span class="form-head-title-span">管理后台</span>
                </div>
                <div class="form-head-subtitle">
                    输入账号密码进行登录</div>

            </div>
            <el-form-item>
                <!-- 账号密码 -->
                <el-input size="large"
                    :placeholder="'账号'"
                    v-model="requestParam.username" autocomplete="off"></el-input>
            </el-form-item>

            <div style="height: 10px;"></div>

            <el-form-item>
                <el-input size="large" :placeholder="store.appFront.password" type="password" :show-password="true"
                    v-model="requestParam.password" autocomplete="off"></el-input>
            </el-form-item>
            <div style="height: 10px;"></div>

            <el-form-item>
                <!-- 登录按钮 -->
                <KtButton size="large" ref="submitBtn" @click="login()" block>{{ store.appFront.login }}</KtButton>
                <!-- 忘记密码 -->
                <div style="height: 10px;"></div>
                <div
                style="width: 100%;"
                >
                    <span
                    style="float: left;"
                    class="forgot-password">{{ store.appFront.forgotPassword }}</span>
                    <span class="register"
                    style="float: right;"
                    >{{ store.appFront.register }}</span>
                </div>

            </el-form-item>

        </el-form>

    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import KtButton from '@/vueKantboot/components/ktButton/KtButton.vue';
import { useStore } from '@/stores/counter';
import $kt from '@/vueKantboot';
import JSEncrypt from 'jsencrypt';
import router from '@/router';

const requestParam = ref({
    // 账号
    username: '',
    // 密码
    password: '',
});


const labelPosition = ref('top');

let store = useStore();
let submitBtn = ref();

let login = async () => {

    submitBtn.value.loading();

    // 登录
    await $kt.request.request({
        url:"/system-user-web/user/login",
        method:"post",
        data:requestParam.value,
    }).then((res)=>{

        if(res.data.state == 2000){
            submitBtn.value.success(res.data.msg);
            $kt.request.setToken(res.data.data.token);

            setTimeout(() => {
                router.push({ path: '/manage/index' });
            }, 1000);

        }else{
            submitBtn.value.error(res.data.errMsg);
        }
    });

    


}



</script>

<style lang="scss" scoped>
.login-box {
    width: 431px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 30px;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(118, 118, 118, 0.1);

    .forgot-password,.register {
        color: #999999;
        font-size: 12px;
        cursor: pointer;
    }

    .head {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .login-box-register {
            font-size: 14px;
            color: #999999;
            cursor: pointer;
        }
    }



    .form-head {
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        color: #333333;
        margin-bottom: 30px;

        .form-head-title-span {
            font-size: 18px;
            margin-left: 2px;
        }

        .form-head-subtitle {
            font-size: 14px;
            font-weight: 400;
            color: #999999;
            margin-top: 10px;
        }
    }

    .login-type-box {
        font-size: 14rpx;
        color: #999999;
        text-align: center;

        .login-type {
            display: inline-block;
            margin-right: 10px;
            cursor: pointer;
            color: #333;
            padding: 5px;
            border-radius: 5px;
        }

        .login-type:active {
            color: #999999;
        }
    }
}
</style>